<template>
    <!-- 附表5：主要质量风险 -->
    <a-spin :spinning="loading">
      <title-name :title="`${$route.query.month}月主要质量风险`"></title-name>
      <!-- 列表 -->
      <div style="padding: 0 20px 20px;" v-if="isShowEdit">
        <div class="branchName">{{ key2 }}</div>
        <a-button type="primary" class="mb20" @click="handleMainQualityRisks()">添加主要质量风险</a-button>
        <a-table :rowKey="(record, index) => record.id + index" bordered :pagination="false" :columns="columns" :dataSource="dataSource"> </a-table>
    </div>
    <div style="padding: 0 20px 20px;" v-else>
        <Empty v-if="!Object.keys(list) || !Object.keys(list).length" description="暂无数据" />
        <div v-for="(item, index) in list" :key="index">
            <div class="branchName">{{ index }}</div>
            <div>
            <a-table :rowKey="(record, index) => record.id + index" bordered :pagination="false" :columns="columns" :dataSource="item"> </a-table>
            </div>
        </div>
    </div>
    <ChooseMainQualityRisks :visible="visibleMainQualityRisks" :info="MainQualityRisksObj" @closeModal="visibleMainQualityRisks = false" @handleConfirm="handleConfirmvisibleMainQualityRisks" />
    <!-- 编辑备注 -->
    <DialogForm ref="dialogForm" :is-emit="false" :visible.sync="visible" edit-model="E" :headerTitle="(form.id != '' ? '编辑' : '添加') + '主要质量风险'" :width="1000" :form="form" :formList="formList" :rules="rules" @confirm="submitCache" />
    </a-spin>
  </template>
  
  <script>
  import { qualityMonthRiskCheckqueryList, qualityMonthRiskCheckaddOrUpdateRiskCheck } from '@/api/quality/qualityMonth/qualityManagementInfo' // api
  import { Empty } from 'ant-design-vue' // 无数据提示
  import DialogForm from '@/components/DialogForm' // 表单弹窗
  import ChooseMainQualityRisks from './ChooseMainQualityRisks'
  export default {
    name: 'CraftsmanStar',
    components: {
      Empty,
      DialogForm,
      ChooseMainQualityRisks,
    },
    props: {
      // 请求参数
      queryParam: {
        type: Object,
        default: () => null
      }
    },
    computed: {
      // 统计表头
      columns() {
        let columns = [
          {
            title: '序号',
            width: 80,
            dataIndex: 'index',
            align: 'center',
            customRender(text, record, index) {
              return index + 1
            }
          },
          {
            title: '项目名称',
            width: 200,
            dataIndex: 'projectName'
          },
          {
            title: '主要质量风险',
            dataIndex: 'problemDescription',
            width: 200,
          },
          {
            title: '现场照片',
            dataIndex: 'fileArrays',
            width: 200,
            customRender: (text) => {
                return text?.[0] ? <l-table disabled={true} uploadType="image" uploadArrys={text} /> : ''
            }
          },
          {
            title: '采取的对策',
            ellipsis: true,
            dataIndex: 'measure'
          }
        ]
        // 节点若为分公司则添加操作按钮
        this.isShowEdit &&
        columns.push({
            title: '操作',
            dataIndex: 'actions',
            width: '180px',
            align: 'center',
            customRender: (text, record, index) => {
                return (
                record.id != '0' && (
                    <div>
                        <a
                        onClick={() => this.handleAdd(record, index) }>
                        编辑
                        </a>
                        <a
                            class="ml20"
                            style="color: red"
                            onClick={() => this.handleDelete(index)}
                        >
                        删除
                        </a>
                    </div>
                    
                )
                )
            }
        })
        return columns
      },
      formList() {
      return [
        { 
          type: 'BaseTextarea',
          attrs: {
            maxLength: 10000,
            showLimitTip: false
          }, 
          keyName: 'measure', 
          label: '采取的对策', 
          span: 24 
        },
      ] // 弹窗表单配置项
    },
    },
    data() {
      return {
        MainQualityRisksObj: {},
        visibleMainQualityRisks: false,
        loading: false, // 加载控件
        list: {}, // 列表
        visible: false, // 弹窗显隐控件
        rules: {
            measure: [{ required: true, whitespace: true, message: '请输入采取的对策', trigger: 'change' }],
        }, // 校验规则
        isShowEdit: false,
        dataSource: [],
        form: {
            id: '',
            measure: '',
        },
        key1: '',
        key2: '',
      }
    },
    mounted() {
        this.isShowEdit = this.queryParam.branchComId && (this.$route.query.editModel == 2 || this.$route.query.editModel == 4)
      // 初始化
      this.init()
    },
    methods: {
      /**
       * 初始化
       */
      init() {
        this.loading = true
        if (this.isShowEdit) {
            this.key1 = this.queryParam.parentName
            this.key2 = this.queryParam.nodeName
        }
        // 请求列表
        qualityMonthRiskCheckqueryList(this.queryParam)
          .then((res) => {
            if (res?.code === '0') {
                if (this.isShowEdit) {
                    if (res.data[this.key2]) {
                        this.dataSource = res.data[this.key2].map(item => {
                            item.qualityMonthId = this.$route.query.id
                            item.isAdjust = this.$route.query.isAdjust
                            item.branchComId = this.queryParam.branchComId
                            item.yearMonth = this.queryParam.monthTime
                            item.type = this.queryParam.type
                            return item
                        })
                    }
                } else {
                    this.list = res.data
                }
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
    handleAdd(record) {
      this.form.measure = record.measure || ''
      this.form.id = record.id || ''
      this.visible = true
    },
      /**
     * 删除
     * form：表单
     */
    handleDelete(i) {
        let that = this
        that.$confirm({
            title: '温馨提示',
            content: '确认删除？',
            okText: '确认',
            cancelText: '关闭',
            onOk: () => {
            this.dataSource.splice(i, 1)
            }
        })
    },
    submitCache(form) {
      const index = this.dataSource.findIndex(item => item.id === form.id)
      this.dataSource[index].measure = form.measure
      this.$message.success('编辑成功！')
      this.visible = false
    },
    /**
     * 提交表单
     */
     handleSubmit() {
      if (this.dataSource.length === 0) {
        this.$message.warning('主要质量风险不能为空！')
        return false
      }
      this.$emit('submitLoading', true)
      qualityMonthRiskCheckaddOrUpdateRiskCheck(this.dataSource)
        .then((res) => {
          if (res.code === '0') {
            this.init()
            this.$message.success('提交成功！')
          }
        }).finally(() => {
          this.$emit('submitLoading', false)
        })
    },
    handleMainQualityRisks() {
      this.MainQualityRisksObj = {
        selectedRowKeys: this.dataSource.map(item => item.id),
        branchComId: this.queryParam.branchComId
      }
      this.visibleMainQualityRisks = true 
    },
    handleConfirmvisibleMainQualityRisks(rows) {
        if (rows && rows.length > 0) {
            rows = rows.map(item => {
                item.qualityMonthId = this.$route.query.id
                item.isAdjust = this.$route.query.isAdjust
                item.branchComId = this.queryParam.branchComId
                item.yearMonth = this.queryParam.monthTime
                item.type = this.queryParam.type
                return item
            })
        this.dataSource = this.dataSource.concat(rows)
      }
    }
    }
  }
  </script>